<template>
  <div class="yun-view">
    <yun-card title="建设统计" >
      <div class="yun-access">
        <div class="yun-bar-chart" ref="sysBarChart"></div>
        <div class="yun-pie-chart" ref="sysPieChart"></div>
    </div>
    </yun-card>
    <yun-card title="访问统计" style="margin-top:20px;">
      <div class="yun-access">
        <div class="yun-bar-chart" ref="accessBarChart"></div>
        <div class="yun-pie-chart" ref="accessmPieChart"></div>
      </div>
    </yun-card>
  </div>
</template>
<script setup>
import { reactive,ref,onMounted } from 'vue'
import * as echarts from 'echarts'
//建设统计统计
const sysBarChart = ref(null)
const systemOption = reactive({
    backgroundColor: '#fff',
    color: [
        '#63caff',
        '#49beff',
    ],
    grid: {
        containLabel: true,
        left: 20,
        right: 20,
        bottom: 10,
        top: 20,
    },
    xAxis: {
        axisLabel: {
            color: '#c0c3cd',
            fontSize: 14,
            interval: 0,
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        data: ['工具', '示例', '问题库'],
        type: 'category',
    },
    yAxis: {
        axisLabel: {
            color: '#c0c3cd',
            fontSize: 14,
        },
        axisTick: {
      
            show: false,
        },
        splitLine: {
            show: false,
        },
        axisLine: {
            
            show: false,
        },
        name: '',
    },
    series: [
        {
            data: [200, 85, 112, 275, 305, 415, 741, 405],
            type: 'bar',
            barMaxWidth: 'auto',
            barWidth: 20,
            itemStyle: {
                color: {
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    type: 'linear',
                    global: false,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#0b9eff',
                        },
                        {
                            offset: 1,
                            color: '#63caff',
                        },
                    ],
                },
            },
            label: {
                show: true,
                position: 'top',
                distance: 10,
                color: '#fff',
            },
        },
        {
            data: [200, 85, 112, 275, 305, 415, 741, 405],
            type: 'pictorialBar',
            barMaxWidth: '20',
            symbolPosition: 'end',
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolSize: [20, 12],
            zlevel: 2,
        }
        
    ],
    tooltip: {
        trigger: 'axis',
        show: false,
    },
})
const initSystemBar=()=>{
  const sysbar = echarts.init(sysBarChart.value)
  sysbar.clear()
  sysbar.setOption(systemOption)
}
const sysPieChart = ref(null)
const systemPieOption = reactive({

    color: [],
    series: [{
        name: '',
        type: 'pie',
        radius: ['60%', '62%'],
        hoverAnimation: false,
        data:[],
    }, ],
})
// 设置数据
const setChartOption=(data,color)=>{
    const formatData = [];
    data.forEach(function(item, index) {
        formatData.push({
            value: item.value,
            name: item.name,
            itemStyle: {
                normal: {
                    borderWidth: 10,
                    shadowBlur: 20,
                    borderColor: color[index],
                    shadowColor: color[index],
                },
            },
        }, {
            value:20,
            name: '',
            itemStyle: {
                normal: {
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false,
                    },
                    color: 'rgba(0, 0, 0, 0)',
                    borderColor: 'rgba(0, 0, 0, 0)',
                    borderWidth: 0,
                },
            },
        })
    })

    return formatData;
};
const initSystemPie=()=>{
  const color = [
    '#0CD2E6',
    '#3751E6',
    '#FFC722',
  ];
  const data = [{
          "name": "工具",
          "value": 300
      },
      {
          "name": "示例",
          "value": 102
      },
      {
          "name": "问题库",
          "value": 154
      }
  ]
  systemPieOption.color = color;
  systemPieOption.series[0].data = setChartOption(data,color)
  const sysbar = echarts.init(sysPieChart.value)
  sysbar.clear()
  sysbar.setOption(systemPieOption)
}
//访问统计
const accessBarChart = ref(null)
const accessOption = reactive({
    backgroundColor: '#fff',
    color: [
        '#63caff',
        '#49beff',
    ],
    grid: {
        containLabel: true,
        left: 20,
        right: 20,
        bottom: 10,
        top: 20,
    },
    xAxis: {
        axisLabel: {
            color: '#c0c3cd',
            fontSize: 14,
            interval: 0,
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        data: ['工具', '示例', '问题库'],
        type: 'category',
    },
    yAxis: {
        axisLabel: {
            color: '#c0c3cd',
            fontSize: 14,
        },
        axisTick: {
      
            show: false,
        },
        splitLine: {
            show: false,
        },
        axisLine: {
            
            show: false,
        },
        name: '',
    },
    series: [
        {
            data: [275, 305, 415],
            type: 'bar',
            barMaxWidth: 'auto',
            barWidth: 20,
            itemStyle: {
                color: {
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    type: 'linear',
                    global: false,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#0b9eff',
                        },
                        {
                            offset: 1,
                            color: '#63caff',
                        },
                    ],
                },
            },
            label: {
                show: true,
                position: 'top',
                distance: 10,
                color: '#fff',
            },
        },
        {
            data: [ 275, 305, 415],
            type: 'pictorialBar',
            barMaxWidth: '20',
            symbolPosition: 'end',
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolSize: [20, 12],
            zlevel: 2,
        }
        
    ],
    tooltip: {
        trigger: 'axis',
        show: false,
    },
})
const initAccessmBar=()=>{
  const sysbar = echarts.init(accessBarChart.value)
  sysbar.clear()
  sysbar.setOption(accessOption)
}
const accessmPieChart = ref(null)
const accessmPieOption = reactive({

    color: [],
    series: [{
        name: '',
        type: 'pie',
        radius: ['60%', '62%'],
        hoverAnimation: false,
        data:[],
    }, ],
})
const initAccessPie=()=>{
  const color = [
    '#0CD2E6',
    '#3751E6',
    '#FFC722',
  ];
  const data = [{
          "name": "工具",
          "value": 60
      },
      {
          "name": "示例",
          "value": 89
      },
      {
          "name": "问题库",
          "value": 34
      }
  ]
  accessmPieOption.color = color;
  accessmPieOption.series[0].data = setChartOption(data,color)
  const sysbar = echarts.init(accessmPieChart.value)
  sysbar.clear()
  sysbar.setOption(accessmPieOption)
}
onMounted(()=>{
  initSystemBar()
  initAccessmBar()
  initSystemPie()
  initAccessPie()
})
</script>
<style lang="scss" scoped>
.yun-access{
  width:100%;
  height:350px;
  display: flex;
  justify-content: space-between;
  .yun-bar-chart{
    width:50%;
    height:100%;
    border:1px solid #d6d6d6;
    margin-right:20px;
  }
  .yun-pie-chart{
    width:50%;
    height:100%;
    border:1px solid #d6d6d6;
  }
}

</style>